<script setup lang="ts">
import { ElScrollbar, ElIcon, ElTooltip } from 'element-plus'
import { Sort, Switch } from '@element-plus/icons-vue'
import { computed, onMounted, onUnmounted } from 'vue'
import { shortcutKey, getTip } from '../shortcut'

const props = defineProps({
  width: {
    type: String,
    default: '30%'
  },
  direction: {
    type: String,
    default: 'rtl'
  }
})

const slots = defineSlots()

const headerHeight = computed(() => {
  return slots.header ? '35px' : '0px'
})
const size = computed(() => {
  return {
    width: props.direction == 'rtl' || props.direction == 'ltr' ? props.width : '100%',
    height: props.direction == 'ttb' || props.direction == 'btt' ? props.width : '100%'
  }
})
// 子组件defineModel，defineProps参数需是对象，父组件modelValue类型不报错
const model = defineModel<boolean>({ default: true })
// 显示切换快捷键
const toggleKey = shortcutKey.drawerToggle
const toggleFn = (e: KeyboardEvent) => {
  if (
    e.code == toggleKey.code &&
    e.shiftKey == toggleKey.shiftKey &&
    e.ctrlKey == toggleKey.ctrlKey &&
    e.altKey == toggleKey.altKey
  ) {
    e.preventDefault()

    model.value = !model.value
  }
}

onMounted(() => {
  document.addEventListener('keydown', toggleFn)
})

onUnmounted(() => {
  document.removeEventListener('keydown', toggleFn)
})
</script>

<template>
  <div
    class="drawer"
    :class="[{ hide: !model }, props.direction]"
    :style="{ width: size.width, height: size.height }"
    @keydown.stop
    @keyup.stop
  >
    <ElTooltip :content="`${getTip(toggleKey)}`" effect="light" :teleported="false">
      <ElIcon
        v-if="direction == 'rtl' || direction == 'ltr'"
        class="switch"
        size="12"
        @click="model = !model"
      >
        <Switch />
      </ElIcon>
      <ElIcon
        v-else-if="direction == 'ttb' || direction == 'btt'"
        class="switch"
        size="12"
        @click="model = !model"
      >
        <Sort />
      </ElIcon>
    </ElTooltip>

    <div v-if="$slots.header" class="header">
      <slot name="header"></slot>
    </div>
    <div class="content">
      <!-- ElScrollbar height设置的为内层，外层固定height: 100% -->
      <ElScrollbar>
        <slot></slot>
      </ElScrollbar>
    </div>
  </div>
</template>

<style scoped>
.drawer {
  color: var(--color-font-1);
  position: absolute;
  flex-shrink: 0;
  flex-grow: 0;
  inset: 0 auto;
  box-sizing: border-box;
  z-index: 10000;
  background-image: radial-gradient(
    transparent 1px,
    color-mix(in srgb, var(--color-1) 50%, rgb(255 255 255 / 0.1) 50%) 1px
  );
  background-size: 4px 4px;
  backdrop-filter: saturate(50%) blur(4px);
  border: 1px solid var(--color-2);
  box-shadow: 0 0 10px var(--color-2);
  transition: all 0.5s ease;
  --header-height: v-bind(headerHeight);
}

.drawer :deep(.el-tabs__header.is-top) {
  position: sticky;
  top: 0;
}

.header {
  height: var(--header-height);
  font-size: 15px;
  font-weight: bold;
  color: var(--color-font-2);
  background: var(--color-2);
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  height: calc(100% - var(--header-height));
}

.switch {
  display: inline-block;
  width: 25px;
  height: 25px;
  color: var(--color-font-1);
  cursor: pointer;
  position: absolute;
  background-color: var(--color-4);
  border: 1px solid var(--color-3);
  box-shadow: 0 0 10px var(--color-5);
  text-align: center;
  vertical-align: middle;
  line-height: 25px;
}

.switch:hover {
  filter: brightness(1.5);
}

.rtl {
  left: auto;
  right: 0;
}

.rtl.hide {
  transform: translateX(100%);
}

.rtl .switch {
  left: 0;
  top: 50%;
  transform: translate(-100%, -50%);
  border-radius: 25px 0 0 20px / 20px 0 0 20px;
}

.ltr {
  left: 0;
  right: auto;
}

.ltr.hide {
  transform: translateX(-100%);
}

.ltr .switch {
  right: 0;
  top: 50%;
  transform: translate(100%, -50%);
  border-radius: 0 20px 20px 0 / 0 20px 20px 0;
}

.ttb {
  top: 0;
  bottom: auto;
}

.ttb.hide {
  transform: translateY(-100%);
}

.ttb .switch {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 100%);
  border-radius: 0 0 20px 20px / 0 0 20px 20px;
}

.btt {
  top: auto;
  bottom: 0;
}

.btt.hide {
  transform: translateY(100%);
}

.btt .switch {
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
  border-radius: 20px 20px 0 0 / 20px 20px 0 0;
}
</style>
